<template>
    <div>
        <div class="display-box">
      <div><span class="color-white">justify-content:</span>
        <el-select v-model="justifyContent" placeholder="请选择">
          <el-option
            v-for="item in justifyContentList"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </div>
      <div>
        <span class="color-yellow">justify-self:</span>
        <el-select v-model="justifySelf" placeholder="请选择">
          <el-option
            v-for="item in justifySelfList"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </div>
    </div>
    <div class="display-box">
      <div class="code">
        <div class="origin">.parent {</div>
          <div class="color2">display: grid;</div>
          <div class="color2">grid-template-columns: 100px 100px;</div>
          <div class="color2">justify-content: <span class="color-purple">{{justifyContent}}</span>;</div>
        <div class="origin">}</div>
        <div class="origin">.one  {</div>
          <div class="color2">justify-self: <span class="color-purple">{{justifySelf}}</span>;</div>
        <div class="origin">}</div>
      </div>
      
      <div class="parent" :style="{justifyContent: justifyContent}">
        <div class="child one" :style="{justifySelf:justifySelf}">One</div>
        <div class="child">Two</div>
        <div class="child">Three</div>
        <div class="child">Four</div>
        <div class="parent-hide-box" :style="{justifyContent: justifyContent}">
          <div class="bg bg1"></div>
          <div class="bg bg2"></div>
        </div>
      </div>
    </div>
    </div>
</template>
<script setup>
import { ref } from 'vue'

const justifyContent = ref('start(deafult)')
const justifySelf = ref('stretch(deafult)')

const justifyContentList = [
    {label:'start(deafult)',value:'start'},
    {label:'center',value:'center'},
    {label:'end',value:'end'},
    {label:'space-between',value:'space-between'},
    {label:'space-around',value:'space-around'},
    {label:'space-evenly',value:'space-evenly'},
]

const justifySelfList = [
    {label:'stretch(deafult)',value:'stretch'},
    {label:'start',value:'start'},
    {label:'center',value:'center'},
    {label:'end',value:'end'},     
]
</script>
<style scoped lang='scss'>
*{
    box-sizing: border-box;
}
.display-box{
  display: flex;
  gap: 30px;
  margin-top: 30px;
  --color-yellow:rgb(255, 213, 0);
}
.code{
  background-color: #151F28;
  padding: 20px;
  border-radius: 6px;
  box-sizing: border-box;
  flex: 1;
}
.origin {
  color: #F8C265;
  line-height: 30px;
}
.color2{
  color: #A3FFEA;
  text-indent: 2em;
  line-height: 30px;
}

.parent {
  position: relative;
  padding: 1px 10px 4px 10px;
  border: 1px solid hsl(210deg 10% 40%);
  border-radius: 8px;
  width: 400px;
  gap: 10px;
  display: grid;
  grid-template-columns: 100px 100px;
  margin-top: 100px;
}
.parent-hide-box{
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  gap: 10px;
  display: grid;
  padding: 2px 10px;
  grid-template-columns: 100px 100px;
}
.parent-hide-box .bg{
  border: 2px dashed #75808a;
  border-radius: 4px;
  height: calc(100% + 20px);
  width: 104px;
  margin-top: -20px;
  margin-left: -2px;
}
.child {
  line-height: 100px;
  text-align: center;
  border:2px solid hsl(210deg 8% 50%);
  border-radius: 3px;
  background: hsl(210deg 15% 20%);
  color: white;
  font-size: 20px;
  font-weight: bold;
  padding: 10px 16px;
}
.color-white{
  color: #fff;
}
.text-align-center{
  text-align: center;
}
.color-purple{
  color: #B88CF2FF;
}

.one{
  background-color:var(--color-yellow);
  color: black;
}
.color-yellow {
  color: var(--color-yellow);
}
</style>